<template>
  <div class="login_page">
    <form @submit.prevent="handleSubmit" class="login_box">

      <h2>找回密码</h2>

      <input id="username" type="text"  
          v-model="form.username" 
          placeholder="请输入账号"/>

      <input id="password" type="password"
          v-model="form.password"
          placeholder="请输入新密码"/>

      <button type="submit" :disabled="isSubmitting">
        {{ isSubmitting ? '发送中...' : '发送' }}
      </button>

    </form>
    
  </div>
</template>
  
<script setup>
import { ref } from 'vue';
import { resetPassword } from '@/api/BlogAuth';
import { useRouter } from 'vue-router';

const router = useRouter();

const isSubmitting = ref(false);

const form = ref({
  username: '',
  password: ''
});

const handleSubmit = async () => {
  isSubmitting.value = true;
  const data = {
    username: form.value.username,
    newPassword: form.value.password
  }
  try {
    await resetPassword(data).then((res)=>{
      console.log(form.value)
      if(res.data.code == 0){
        alert('发送成功: ' + res.data.data);
        router.push('/login');
      }else{
        alert('发送失败'+res.data.msg);
      }
    })
  } catch (error) {
    alert('发送失败'+error);
  } finally {

    isSubmitting.value = false;

  }
};
</script>
  
  
<style scoped>
.login_box {
  display: flex;flex-flow: column nowrap;
  max-width: 400px;gap: 1.5rem;
  padding: 2rem; margin: 200px auto;
  
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.login_box>h2{
  display: block;text-align: center;
  margin: 0;
}

input {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

input:focus {
  outline: none;
  border-color: #646cff;
}

button {
  padding: 0.75rem;
  background-color: #646cff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #535bf2;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>